<template>
	<view class="main-page" style="overflow-x: hidden;">
		<view class="row-container" style="height: 110rpx;width: 100%;background: white;">
			<view class="single-tab" @click="switchListType(-1)">
				<text v-if="listType == -1" class="font-333-32 font-weight-600">全部</text>
				<text v-if="listType != -1" class="font-333-32">全部</text>
				<view v-if="listType == -1" class="chosen-flag"></view>
			</view>
			<!-- <view class="single-tab" @click="switchListType(0)">
				<text v-if="listType == 0" class="font-333-32 font-weight-600">待支付</text>
				<text v-if="listType != 0" class="font-333-32">待支付</text>
				<view v-if="listType == 0" class="chosen-flag"></view>
			</view> -->
			<view class="single-tab" @click="switchListType(1)">
				<text v-if="listType == 1" class="font-333-32 font-weight-600">进行中</text>
				<text v-if="listType != 1" class="font-333-32">进行中</text>
				<view v-if="listType == 1" class="chosen-flag"></view>
			</view>
			<view class="single-tab" @click="switchListType(2)">
				<text v-if="listType == 2" class="font-333-32 font-weight-600">已结束</text>
				<text v-if="listType != 2" class="font-333-32">已结束</text>
				<view v-if="listType == 2" class="chosen-flag"></view>
			</view>
		</view>
		
		<view class="column-container width-100p mt-20" v-if="orderList.length > 0">
			<view class="single-order-item" v-for="(item , index) in orderList" :key="index" 
			@click="gotoOrderDetail(item)">
				<view class="row-container-row-between width-100p mt-4">
					<view class="row-container">
						<image v-if="item.brandImg" class="platform-ic" :src="item.brandImg" mode="heightFix"></image>
						<text class="font-999-26">报名时间：{{item.createTime}}</text>
					</view>
					
					<view class="row-container">
						<text v-if="item.status == 0" class="font-333-26" style="flex-shrink: 0;">待支付</text>
						<text v-if="item.status == 1" class="font-333-26" style="flex-shrink: 0;">{{item.activeId ? '待上传' : '待下单'}}</text>
						<text v-if="item.status == 2" class="font-333-26" style="flex-shrink: 0;">{{item.activeId ? '待审核' : '待完成'}}</text>
						<text v-if="item.status == 3" class="font-333-26" style="flex-shrink: 0;">{{item.activeId ? '审核通过' : '已完成'}}</text>
						<text v-if="item.status == 4" class="font-f23030-26" style="flex-shrink: 0;">审核失败</text>
						<text v-if="item.status == 5" class="font-999-26" style="flex-shrink: 0;">已取消</text>
						<text v-if="item.status == 6" class="font-999-26" style="flex-shrink: 0;">已过期</text>
						<image class="wh-26 ml-8" src="../../static/ic_question.png" 
						v-if="!item.activeId && (item.status == 1 || item.status == 2)"
						@click.stop="showIntroWindow = true"></image>
					</view>
				</view>
				<view class="line-divider"></view>
				<view class="row-container-top width-100p">
					<view class="item-img-box">
						<image :src="item.shopImg" class="item-img"></image>
						<text class="brand-tag" v-if="item.checkBrand">品牌</text>
					</view>
					<view class="column-container width-100p">
						<view class="row-container-row-between">
							<text class="item-name">{{item.shopName}}</text>
							<text class="copy-shop" @click.stop="handleCopy(item.shopName)">复制店名</text>
						</view>
						
						<view class="row-container mt-10">
							<text class="reward-text" v-if="item.fullAmount">满{{item.fullAmount}}返{{item.returnAmount}}</text>
							<text class="reward-text" v-if="!item.fullAmount && item.heightRate">奖实付{{item.heightRate}}%</text>
							<text class="reward-text" v-if="!item.fullAmount && item.heightAmount">最高{{item.heightAmount}}</text>
							<text class="no-comment" v-if="item.checkComment == 1">无需评价</text>
							<text class="reward-text" v-if="item.checkComment == 0 && !item.activeId">10字0图</text>
							<text class="reward-text" v-if="item.checkComment == 0 && item.activeId">{{item.favourableCommentCount}}字{{item.favourableCommentImgCount}}图</text>
						</view>
						<text class="font-666-26 mt-10" v-if="item.mobile">报名手机号：{{item.mobile}}</text>
					</view>
				</view>
				
				<view class="red-box" v-if="item.fullAmount && item.status == 1 
				&& item.surplusTime && item.surplusTime > 0">
					<view class="row-container">
						<text class="font-ff621f-24">剩余上传截图时间：</text>
						<uv-count-down
							:time="item.surplusTime * 1000"
							format="HH时mm分ss秒"
							@change="handleChangeCountDown($event , item)"
						>
							<view class="row-container-center">
								<text class="time-item" v-if="item.timeData.days > 0">{{item.timeData.days > 9 ? item.timeData.days : '0' + item.timeData.days }}</text>
								<text class="font-ff621f-24 font-weight-600 mr-6 ml-6" v-if="item.timeData.days > 0">天</text>
								<text class="time-item" v-if="item.timeData.hours">{{item.timeData.hours > 9 ? item.timeData.hours : '0' + item.timeData.hours }}</text>
								<text class="time-item" v-else>00</text>
								<text class="font-ff621f-24 font-weight-600 mr-6 ml-6">时</text>
								<text class="time-item" v-if="item.timeData.minutes">{{item.timeData.minutes > 9 ? item.timeData.minutes :'0' + item.timeData.minutes }}</text>
								<text class="time-item" v-else>00</text>
								<text class="font-ff621f-24 font-weight-600 mr-6 ml-6">分</text>
								<text class="time-item" v-if="item.timeData.seconds">{{item.timeData.seconds > 9 ? item.timeData.seconds :'0' + item.timeData.seconds }}</text>
								<text class="time-item" v-else>00</text>
								<text class="font-ff621f-24 font-weight-600 mr-6 ml-6">秒</text>
							</view>
						</uv-count-down>
					</view>
				</view>
				
				<view class="red-box" v-if="!item.fullAmount && 
				(item.status == 1 || item.status == 2)">
					<text class="font-ff621f-24 mb-12 font-weight-600" v-if="item.status == 1 && item.activeType == 2">*请于4小时内提交评价截图</text>
					<text class="font-ff621f-24 mb-12 font-weight-600" v-if="item.status == 1 && item.activeType == 1">*请于30分钟内下单，下单后会有4个小时收餐</text>
					<text class="font-ff621f-24 mb-12 font-weight-600" v-if="item.status == 2 && item.checkComment == 1">*无需提交截图，完成订单即可</text>
					<text class="font-ff621f-24 mb-12 font-weight-600" v-if="item.status == 2 && item.checkComment == 0">*无需提交截图，请到美团完成评价</text>
					<view class="row-container" v-if="item.surplusTime && item.surplusTime > 0">
						<text class="font-ff621f-24">{{item.status == 1 ? '剩余下单时间：' : '剩余完成时间：'}}</text>
						<uv-count-down
							:time="item.surplusTime * 1000"
							format="HH时mm分ss秒"
							@change="handleChangeCountDown($event , item)"
						>
							<view class="row-container-center">
								<text class="time-item" v-if="item.timeData.days > 0">{{item.timeData.days > 9 ? item.timeData.days : '0' + item.timeData.days }}</text>
								<text class="font-ff621f-24 font-weight-600 mr-6 ml-6" v-if="item.timeData.days > 0">天</text>
								<text class="time-item" v-if="item.timeData.hours">{{item.timeData.hours > 9 ? item.timeData.hours : '0' + item.timeData.hours }}</text>
								<text class="time-item" v-else>00</text>
								<text class="font-ff621f-24 font-weight-600 mr-6 ml-6">时</text>
								<text class="time-item" v-if="item.timeData.minutes">{{item.timeData.minutes > 9 ? item.timeData.minutes :'0' + item.timeData.minutes }}</text>
								<text class="time-item" v-else>00</text>
								<text class="font-ff621f-24 font-weight-600 mr-6 ml-6">分</text>
								<text class="time-item" v-if="item.timeData.seconds">{{item.timeData.seconds > 9 ? item.timeData.seconds :'0' + item.timeData.seconds }}</text>
								<text class="time-item" v-else>00</text>
								<text class="font-ff621f-24 font-weight-600 mr-6 ml-6">秒</text>
							</view>
						 </uv-count-down>
					</view>
				</view>
				
				<view class="line-divider"></view>
				
				<view class="row-container-row-between width-100p" 
				v-if="item.status == 3 && item.commission">
					<text class="font-333-28 font-weight-600">返现金额：{{item.commission}}</text>
					<text class="font-999-24" v-if="item.activeId">返现金已转入您的余额</text>
					<text class="font-999-24" v-else>返现金已转入您的微信零钱</text>
				</view>
				
				<view class="line-divider" v-if="item.status == 3"></view>
				
				<view class="row-container-end width-100p">
					<view class="play-ad" @click.stop="handlePlayAd(item)" 
					v-if="item.activeId && item.status == 2 
					&& !item.errorMsg && item.checkAudit == 0 && item.checkSpeedOpen == 1">
						<image class="wh-24 mr-8" src="../../static/ic_play_ad.png"></image>
						<text class="font-333-24">看广告秒审</text>
					</view>
					<text class="check-detail" v-if="item.status == 1 || item.status == 0"
					@click.stop="clickCancelOrder(item)">取消订单</text>
					<view class="to-withdraw" v-if="item.status == 3 && item.showWithdrawBtn == 1" @click.stop="gotoWithdraw">
						去提现
					</view>
					<text class="check-detail">查看详情</text>
					<text class="check-detail" v-if="item.status == 1 && (item.wxPath || item.shopCodeImg)" @click.stop="gotoBuyOrder(item)">去下单</text>
					<text class="to-upload" v-if="item.activeId && item.status == 1 " @click.stop="gotoUpload(item , 0)">上传截图</text>
					<text class="check-detail" v-if="item.activeId && item.status == 2 " @click.stop="gotoUpload(item , 1)">查看截图</text>
				</view>
				
				
			</view>
		</view>
		
		<NoData v-else type="orderList"></NoData>
		<groupImgWindow ref="groupImgWindow" ></groupImgWindow>
		
		<view class="cancel-order-window" v-if="showCancelWindow">
			<view class="cancel-inner-window">
				<image src="../../static/bg_shadow_buy_window.png" class="cancel-shadow-bg"></image>
				<text class="font-333-36 font-weight-600">取消订单</text>
				<text class="font-666-28 mt-30" style="text-align: center;">
					您确定取消此次订单？</text>
				<view class="row-container-row-between mt-40 width-100p" style="padding-left: 8rpx;padding-right: 16rpx;">
					<text class="cancel-close" @click="showCancelWindow = false">我再想想</text>
					<text class="cancel-confirm" @click="handleCancelOrder">确定取消</text>
				</view>
			</view>
		</view>
		
		<!-- 去店铺点餐弹窗 -->
		<view class="to-shop-window" v-if="showToShopWindow">
			<view class="to-shop-box">
				<image class="to-shop-shadow-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<text class="font-333-44 font-weight-600">进店方式</text>
				<view class="code-img-box" v-if="clickShopCodeImg">
					<view class="row-container" style="position: relative;">
						<view class="title-line"></view>
						<text class="font-000-28 font-weight-600">方式一：二维码进店</text>
					</view>
					<image class="shop-code-img" :src="clickShopCodeImg" :show-menu-by-longpress="true"></image>
					<text class="font-666-24">长按二维码，进入店铺点餐</text>
				</view>
				<view class="code-img-box">
					<view class="row-container" style="position: relative;">
						<view class="title-line" style="width: 336rpx;"></view>
						<text class="font-000-28 font-weight-600" v-if="clickShopCodeImg">方式二：复制店铺名称下单</text>
						<text class="font-000-28 font-weight-600" v-else>复制店铺名称下单</text>
					</view>
					<text class="copy-hint">点击即可复制店铺名称，并跳转到美团/饿了么下单，搜索请注意店铺名称</text>
					<text class="copy-btn" @click="handleCopyShop">复制店名</text>
				</view>
				<text class="font-666-28" style="padding: 32rpx;" @click="showToShopWindow=false">我再想想</text>
			</view>
		</view>
		
		<!-- 订单状态说明弹窗 -->
		<view class="cancel-order-window" v-if="showIntroWindow">
			<view class="cancel-inner-window">
				<image src="../../static/bg_shadow_buy_window.png" class="cancel-shadow-bg"></image>
				<text class="font-333-36 font-weight-600">温馨提示</text>
				<text class="font-666-28 mt-30" style="text-align: center;">
					报完名，显示“待下单”状态。客户到美团下完单后，但是餐没到，此时显示“待完成”状态。餐到后，客户给完好评，显示“已完成”状态。</text>
				<text class="cancel-confirm width-100p mt-40" @click="showIntroWindow = false">我知道了</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import NoData from '../../components/nodata.vue'
	import groupImgWindow from '../../components/groupImgWindow.vue'
	
	import timeUtils from '../../utils/time.js'
	
	export default {
		data() {
			return {
				listType : -1 , // -1全部  0待支付  1进行中 2已结束 3已取消 
				orderList:[],
				page : 1,
				hasMoreData:false,
				
				clickTime:0,
				
				clickCancelOrderData:null,  //点击取消的订单数据
				showCancelWindow:false ,//确认取消的弹窗
				
				videoAd:null,
				adOrderId:'' , // 点击看广告的订单id
				
				showToShopWindow:false , // 店铺二维码弹窗
				clickShopCodeImg:'' , //点击的店铺二维码
				clickShopName:'' , // 点击的店名
				
				showIntroWindow:false , // 订单状态说明弹窗
			}
		},
		
		onReady() {
			this.initVideoAd()
		},
		
		onLoad() {
			uni.showTabBar()
			
			this.loadOrderList()
			
			let that = this
			uni.$on("refreshOrderList" , ()=>{
				that.page = 1
				that.loadOrderList()
			})
			
			uni.$on("openGroupImgWindow" , (data)=>{
				console.log("openGroup------" , data)
				if (data == "orderList"){
					that.$refs.groupImgWindow.showGroupImg = true
				}
			})
			
			uni.$on("authSuccess" , ()=>{
				that.page = 1
				that.loadOrderList()
			})
			
		},
		
		beforeDestroy() {
			uni.$off("authSuccess")
			uni.$off("openGroupImgWindow")
			uni.$off("refreshOrderList")
		},
		
		
		components:{
			NoData,
			groupImgWindow
		},
		
		onPullDownRefresh() {
			this.page = 1
			this.loadOrderList()
		},
		
		onReachBottom() {
			if (this.hasMoreData){
				this.page ++
				this.loadOrderList()
			}
		},
		
		methods: {
			initVideoAd(){
				let that = this
				this.videoAd = uni.createRewardedVideoAd({
					adUnitId:this.config.auditAdUnitId
				})
				this.videoAd.onLoad(() => {
				})
				this.videoAd.onError((err) => {})
				this.videoAd.onClose((res) => {
					that.videoAd.offClose()   //加在这里，而不是if后面
					if (res && res.isEnded) {
						// 写入你想奖励的内容
						console.log('order-index---看完广告')
						//重置激励视频
						that.videoAd = null
						that.initVideoAd()
						that.watchedAdToAudit()
					}else {
						uni.showToast({
							title:'取消播放广告，加速失败',
							icon:'none'
						})
				  	}
				}); 
			},
			
			switchListType(type){
				this.listType = type
				this.page = 1
				this.loadOrderList()
			},
			
			gotoOrderDetail(item){
				let nowTimeMills = new Date().getTime();
				if (this.clickTime > 0 && nowTimeMills - this.clickTime < 500){
					return
				}
				this.clickTime = nowTimeMills
				
				if (item.activeId){
					if (item.activeType == 2){ // 活动类型2 为 好评返现活动
						uni.navigateTo({
							url:'/pages/order/commentOrderDetail?actId=' + item.activeId + "&orderId=" + item.id
						})
					} else{
						uni.navigateTo({
							url:'/pages/order/orderDetail?actId=' + item.activeId + "&orderId=" + item.id
						})
					}
				} else{
					uni.navigateTo({
						url:'/pages/order/officialOrderDetail?orderNo=' +  item.orderNo
					})
				}
				
			},
			
			loadOrderList(){
				let that = this
				this.http({
					url:'/user/order/orderList',
					method:'POST',
					data:{
						pageNo : that.page,
						pageSize : 10,
						status: that.listType
					},
					success(res){
						if (res.code == 200){
							if (res.data && res.data.length > 0){
								res.data.forEach((item)=>{
									if (item.status == 1 && item.surplusTime > 0){
										
										that.$set(item , "timeData" , {days : 0 , hours : 0 , minutes : 0 , seconds : 0})
										
										let timeStr = timeUtils.formatSeconds(item.surplusTime)
										console.log('timeStr----' , timeStr)
										if (timeStr){
											that.$set(item , 'leftHour' , timeStr.split(':')[0])
											that.$set(item , 'leftMin' , timeStr.split(':')[1]) 
											that.$set(item , 'leftSec' , timeStr.split(':')[2]) 
										}
									}
								})
							}
							
							if (that.page == 1){
								that.orderList = res.data
							} else{
								that.orderList = [...that.orderList, ...res.data]
							}
							
							let firstFinishOrder = that.orderList.find((item) => {
								return item.status == 3 && item.activeId
							})
							if (firstFinishOrder != null){
								that.$set(firstFinishOrder , 'showWithdrawBtn' , 1)
							}
							that.hasMoreData = res.data.length >= 10
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			clickCancelOrder(item){
				this.clickCancelOrderData = item
				this.showCancelWindow = true
			},
			
			//取消订单
			handleCancelOrder(){
				this.showCancelWindow = false
				if (!this.clickCancelOrderData.id){
					return
				}
				
				let that = this
				this.http({
					url:'/user/order/cancelOrder',
					method:"POST",
					data:{
						orderId:that.clickCancelOrderData.id
					},
					success(res){
						if (res.code == 200){
							that.page = 1
							that.loadOrderList()
						}
						setTimeout(()=>{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						} , 500)
					},
					failed(e){
						
					}
				})
			},
			
			//跳转上传截图
			gotoUpload(item , isModify){
				if (item.activeType == 2){
					uni.navigateTo({
						url:'/pages/order/uploadCommentOrder?orderNo=' + item.orderNo
						 + "&screenshotIntro=" + item.screenshotIntro
						 + "&orderId=" + item.id
						 + "&isModify=" + isModify
					})
				} else{
					if (item.brandName == '大众点评' || item.brandName == '美团团购'){
						uni.navigateTo({
							url:'/pages/order/uploadTicket?orderNo=' + item.orderNo
							 + "&checkComment=" + item.checkComment 
							 + "&brandName=" + item.brandName 
							 + "&screenshotIntro=" + item.screenshotIntro
							 + "&orderId=" + item.id
							 + "&isModify=" + isModify
						})
					} else{
						uni.navigateTo({
							url:'/pages/order/uploadOrder?orderNo=' + item.orderNo
							 + "&checkComment=" + item.checkComment 
							 + "&brandName=" + item.brandName 
							 + "&screenshotIntro=" + item.screenshotIntro
							 + "&orderId=" + item.id
							 + "&isModify=" + isModify
						})
					}
				}
			},
			
			//播放广告
			handlePlayAd(item){
				// 用户触发广告后，显示激励视频广告
				if (this.videoAd){
					this.adOrderId = item.id 
					this.videoAd.show().catch(()=>{
						this.videoAd.load()
						.then(()=> this.videoAd.show())
						.catch(err =>{
							console.log('激励视频 广告显示失败---' , err)
						})
					})
				} else{
					this.initVideoAd()
				}
			},
			
			//看完广告后调用审核
			watchedAdToAudit(){
				if (!this.adOrderId) return
				let that = this
				this.http({
					url:'/user/order/passOrder',
					method:"POST",
					data:{
						orderId:that.adOrderId
					},
					success(res){
						if (res.code == 200){
							that.page = 1
							that.adOrderId = ""
							that.loadOrderList()
						}
						setTimeout(()=>{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						} , 500)
					},
					failed(e){
						
					}
				})
				
			},
			
			//跳转提现页面
			gotoWithdraw(){
				uni.navigateTo({
					url:'/pages/mine/withdraw'
				})
			},
			
			//点击去下单  如果官霸则跳转小程序  非官霸弹窗店铺二维码
			gotoBuyOrder(item){
				if (!item.activeId){
					uni.navigateToMiniProgram({
						appId:'wx2c348cf579062e56',
						path:item.wxPath
					})
				} else{
					this.clickShopCodeImg = item.shopCodeImg
					this.clickShopName = item.shopName
					this.showToShopWindow = true
				}
			},
			
			handleCopyShop(){
				if (this.clickShopName){
					uni.setClipboardData({
						data:this.clickShopName,
						success() {
							uni.showToast({
								title:'复制成功',
								icon:'none'
							})
						}
					})
				}
			},
			
			handleCopy(name){
				if (name){
					uni.setClipboardData({
						data:name,
						success() {
							uni.showToast({
								title:'复制成功',
								icon:'none'
							})
						}
					})
				}
			},
			
			//订单倒计时结束后需刷新列表
			handleOrderTimeUp(){
				this.page = 1
				this.loadOrderList()
			},
			
			handleChangeCountDown(e , item){
				this.$set(item , 'timeData' , e)
				// item.timeData = e
			}
			
			
		}
	}
</script>

<style lang="scss">
	.single-tab{
		position: relative;
		height: 110rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-grow: 1;
		
		.chosen-flag{
			width: 64rpx;
			height: 8rpx;
			background: linear-gradient(90.04deg, #FFC01F 0.04%, rgba(255, 209, 0, 0) 101.53%);
			position: absolute;
			bottom: 27rpx;
		}
	}
	
	.single-order-item{
		display: flex;
		flex-direction: column;
		width: calc(100% - 100rpx);
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: white;
		border-radius: 16rpx;
		
		.red-box{
			display: flex;
			flex-direction: column;
			width: calc(100% - 24rpx);
			padding: 12rpx;
			background: #FFEFE9;
			border-radius: 10rpx;
			margin-top: 24rpx;
			align-items: center;
			justify-content: center;
			
			.time-item{
				background: #FF621F;
				color: white;
				padding: 5rpx 9rpx;
				font-size: 24rpx;
				font-weight: 600;
				border-radius: 6rpx;
			}
			
		}
		
		.line-divider{
			width: 100%;
			height: 1rpx;
			background: #F5F5F5;
			margin-top: 24rpx;
			margin-bottom: 24rpx;
		}
		
		.item-name{
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
			width: 360rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
		
		.copy-shop{
			color: #333333;
			font-size: 20rpx;
			padding: 4rpx 10rpx;
			margin-left: 34rpx;
			border: 1rpx solid #999999;
			border-radius: 6rpx;
		}
		
		.item-img-box{
			display: flex;
			flex-direction: row;
			width: 130rpx;
			height: 130rpx;
			border-radius: 10rpx;
			flex-shrink: 0;
			position: relative;
			margin-right: 20rpx;
			
			.item-img{
				width: 130rpx;
				height: 130rpx;
				border-radius: 10rpx;
				flex-shrink: 0;
			}
			.brand-tag{
				width: 56rpx;
				height: 32rpx;
				position: absolute;
				left: 0;
				top: 0;
				color: white;
				font-weight: 600;
				text-align: center;
				line-height: 32rpx;
				font-size: 20rpx;
				background: linear-gradient(90deg, #F83131 0%, #FF6D3F 100%);
				border-top-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				z-index: 10;
			}
		}
		
		.platform-ic{
			width: auto;
			height: 32rpx;
			margin-right: 10rpx;
		}	
		
		.check-detail{
			font-size: 24rpx;
			color: #333333;
			padding: 9rpx 17rpx;
			border: #D9D9D9 solid 2rpx;
			border-radius: 10rpx;
			margin-left: 10rpx;
		}
		
		.to-upload{
			font-size: 24rpx;
			color: #FF621F;
			font-weight: 600;
			padding: 9rpx 17rpx;
			border-radius: 10rpx;
			margin-left: 10rpx;
			background: #FF621F1A;
		}
		
		.play-ad{
			background: #FFD100;
			border-radius: 10rpx;
			padding: 9rpx 15rpx;
			margin-left: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		
		.reward-text{
			color: #FF621F;
			font-size: 20rpx;
			font-weight: 600;
			padding: 3rpx 10rpx;
			background: #FFF5ED;
			border: 2rpx solid #FFD9C6;
			border-radius: 6rpx;
			margin-right: 8rpx;
		}
		
		.no-comment{
			color: #4BA2E9;
			font-size: 20rpx;
			font-weight: 600;
			padding: 3rpx 10rpx;
			background: #E6F9FF;
			border: 2rpx solid #B1ECFF;
			border-radius: 6rpx;
			margin-right: 8rpx;
		}
		
		.to-withdraw{
			background: #FFD100;
			border-radius: 10rpx;
			padding: 9rpx 29rpx;
			color: #333333;
			font-size: 24rpx;
			margin-right: 10rpx;
		}
		
	}
	
	.cancel-order-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 100;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.cancel-inner-window{
			display: flex;
			flex-direction: column;
			width: calc(100% - 212rpx);
			padding-left: 36rpx;
			padding-right: 28rpx;
			padding-top: 44rpx;
			padding-bottom: 44rpx;
			position: relative;
			background-color: white;
			align-items: center;
			border-radius: 30rpx;
			
			.cancel-shadow-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.cancel-close{
				flex-grow: 1;
				height: 88rpx;
				background: #F5F5F5;
				border: 2rpx solid #E0E0E0;
				border-radius: 10rpx;
				margin-right: 15rpx;
				color: #333333;
				font-size: 28rpx;
				text-align: center;
				line-height: 88rpx;
			}
			
			.cancel-confirm{
				flex-grow: 1;
				height: 88rpx;
				background: #FFD100;
				border-radius: 10rpx;
				color: #333333;
				font-size: 28rpx;
				text-align: center;
				line-height: 88rpx;
				margin-left: 15rpx;
				font-weight: 600;
			}
		}
	}
	
	.to-shop-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 200;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.to-shop-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: calc(100% - 148rpx);
			margin-left: 74rpx;
			margin-right: 74rpx;
			padding-top: 44rpx;
			background: white;
			border-radius: 30rpx;
			position: relative;
			
			.to-shop-shadow-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.code-img-box{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: calc(100% - 88rpx);
				padding: 30rpx 0rpx;
				margin: 30rpx 44rpx 0rpx 30rpx;
				background: #FFFAE6;
				border-radius: 10rpx;
				
				.title-line{
					width: 251rpx;
					height: 9rpx;
					background: linear-gradient(90deg, #FFC01F 0%, rgba(255, 192, 31, 0) 100%);
					position: absolute;
					top: 30rpx;
				}
				
				.copy-hint{
					color: #666666;
					font-size: 24rpx;
					line-height: 40rpx;
					text-align: center;
					margin: 30rpx 0rpx;
					width: calc(100% - 60rpx);
				}
				
				.copy-btn{
					width: 232rpx;
					height: 80rpx;
					background: #FFD100;
					border-radius: 10rpx;
					line-height: 80rpx;
					text-align: center;
					color: #333333;
					font-size: 28rpx;
					font-weight: 600;
				}
			}
			
			.shop-code-img{
				width: 380rpx;
				height: 380rpx;
				margin: 30rpx 0rpx;
			}
			
			.line-divider{
				width: 333rpx;
				height: 9rpx;
				background: linear-gradient(90deg, #FFC01F 0%, rgba(255, 192, 31, 0) 100%);
				position: absolute;
				top: 28rpx;
			}
			
		}
		
	}
	
</style>
